<template>
  <div class="audition277">
    <p>useEffect和useLayout都是副作用hooks，两则非常相似，同样都接收两个参数：</p>
    <p>(1)第一个参数为函数，第二个参数为依赖列表，只有依赖更新时才会执行函数；<br/>返回一个函数，当页面刷新的或销毁的时候执行return后的代码；</p>
    <p>(2)如果不接受第二个参数，那么在第一次渲染完成之后和每次更新渲染页面的时候，都会调用useEffect的回调函数；</p>
    <p><br></p>
    <p>useEffect和 useLayout的主要区别就是他们的执行时机不同，<br/>在浏览器中js线程与渲染线程是互斥的，当js线程执行时，渲染线程呈挂起状态，只有当js线程空闲时渲染线程才会执行，将生成的 dom绘制。<br/>useLayoutEffect在js线程执行完毕即dom更新之后立即执行，而useEffect是在渲染结束后才执行，<br/>也就是说 useLayoutEffect比 useEffect先执行。</p>
  </div>
</template>

<script>
export default {
  name: 'Audition277'
}
</script>

<style>

</style>